<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用css3图层次选择器</title>
		<style type="text/css">
			/*p,ul{
				  border: 0.0625rem solid #FF0000;
			}*/
			/*后代选择器*/
			/*body p{
				background: #FF0000;
			}*/
			/*子选择器*/
			/*body>p{
				background:pink;
			}*/
			/*相邻兄弟选择器*/
			/*.active + p{
				background: green;
			}*/
			/*通用选择器*/
			/*.active~p{
				background: yellow;
			}*/
			/*ul p{
				background: #0000FF;
			}*/
		</style>
	</head>
	<body>
		<p class="active">1</p>
		<p id="male">2</p>
		<p>3</p>
		<ul>
			<li>
				<p>4</p>
			</li>
			<li>
				<p>5</p>
			</li>
			<li>
				<p>6</p>
			</li>
		</ul>
	</body>
</html>
